import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import editorConfig from "@/config/component.config"
// 一个用于异步操作的 thunk 函数
// export const incrementAsync = createAsyncThunk(
//   'counter/incrementAsync',  
//   async (params, thunkAPI) => {
//   }
// )
export const editorSlice = createSlice({
  name: 'editor',
  initialState: {
    // 编辑器初始化
    editorConfig,
    // 渲染web视图数据可变
    webRenderData: {
      projectConfig: {
        id: "",// 项目id
        name: "",// 项目名称
      },
      global: {
        ...editorConfig.global
      },
      webConfig: {
        ...editorConfig.webConfig
      },
      components: [
        // {
        //   id: "",
        //   type: "base",
        //   key: "text",
        //   label: "文字",
        //   icon: "base-text",
        //   x:0,
        //   y:0,
        //   zIndex:0,
        //   componentName: "BaseText",
        //   config: {},
        // }
      ]
    }
  },
  reducers: {
    // 改变缩放倍数
    changeScale: (state, action) => {
      if (action?.payload?.scale) {
        state.editorConfig.global.scale = action.payload.scale
      }
    },

    // 在容器内添加组件
    addComponent: (state, action) => {
      state.webRenderData.components.push(action.payload)
    }




    // increment: state => {
    //   // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
    //   // 并不是真正的改变状态值，因为它使用了 Immer 库
    //   // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
    //   // 不可变的状态
    //   state.value += 1
    // },
    // decrement: state => {
    //   state.value -= 1
    // },
    // incrementByAmount: (state, action) => {
    //   console.log(action);
    //   state.value = action.payload.value
    // }
  },
  // 可以在 `extraReducers` 内对不同的 action 进行处理
  extraReducers: builder => {
    // builder.addCase(incrementAsync.fulfilled, (state, action) => {
    //   console.log("fulfilled",action);
    //   state.value = action.payload.code
    // }).addCase(incrementAsync.pending, (state, action) => {
    //   console.log("pending");
    // }).addCase(incrementAsync.rejected, (state, action) => {
    //   console.log("rejected");
    // })
  }
})


export default editorSlice.reducer